<template>
  <div>
    <div class="collection">
      <router-link to="/minepage/mine"
        ><img
          style="margin-left: 4%; margin-top: 5%; float: left"
          src="/src/assets/微信图片_20220829174837.png"
      /></router-link>
      <span style="line-height: 55px">我的收藏</span>
    </div>
    <div
      style="
        width: 100%;
        height: 50px;
        float: left;
        postiton: flex;
        justify-content: space-around;
        display: flex;
      "
    >
      <div
        ref="bxoRef1"
        @click="dianji(1)"
        class="span1"
        style="color: #f19f90; wdith: 20%"
      >
        商品
      </div>
      <div
        ref="bxoRef2"
        @click="dianji(2)"
        class="span1"
        style="color: #5f5f5f; wdith: 20%"
      >
        帖子
      </div>
      <div
        ref="bxoRef3"
        @click="dianji(3)"
        class="span1"
        style="color: #5f5f5f; wdith: 20%"
      >
        日记
      </div>
      <div
        ref="bxoRef4"
        @click="dianji(4)"
        class="span1"
        style="color: #5f5f5f; wdith: 20%"
      >
        问答
      </div>
      <div
        ref="bxoRef5"
        @click="dianji(5)"
        class="span1"
        style="color: #5f5f5f; wdith: 20%"
      >
        科普
      </div>
    </div>
    <div style="width: 100%; background-color: #fbf9f6; float: left">
      <div class="minifoot-1">
        <div
          class="minifoot-1-2"
          v-for="item in arr"
          :key="item"
          v-show="shangping"
        >
          <div
            style="
              width: 90%;
              height: 90%;
              margin-top: 3%;
              float: left;
              margin-left: 3%;
            "
          >
            <img
              src="/src/assets/微信图片_20220829160908.png"
              style="width: 90px; height: 90px; float: left"
            />
            <div
              style="
                width: 210px;
                height: 90px;
                float: left;
                float: left;
                margin-left: 5%;
                background-color: #ffffff;
              "
            >
              <span>【皮秒激光】皮秒嫩肤保湿去黄提亮无刺激科学…</span>
              <p>
                <span style="font-size: 10px; color: #cccccc"
                  >李金明,北京华瑞整形医院</span
                >
              </p>
              <p>
                <span style="color: red; float: left"><b>￥999.0</b></span
                ><span
                  style="
                    border: 1px solid #ec7b67;
                    color: #ec7b67;
                    width: 20px;
                    height: 10px;
                    margin-left: 40%;
                    margin-right: 2%;
                    font-size: 10px;
                  "
                  >特惠</span
                ><span
                  style="
                    border: 1px solid #ec7b67;
                    color: #ec7b67;
                    width: 20px;
                    height: 10px;
                    font-size: 10px;
                  "
                  >秒杀</span
                >
              </p>
            </div>
          </div>
        </div>
        <div
          style="display: flex; justify-content: space-around; flex-flow: wrap"
          v-show="tiezi"
        >
          <div class="tiezi1" style="text-align: center">
            <img class="img1" src="/src/assets/微信图片_20220902144149.jpg" />
            <p>
              <span style="font-size: 18px">眼综合+全脸脂肪填充前后对比</span>
            </p>
            <p>
              <img
                style="float: left; margin-top: 2%"
                src="/src/assets/微信图片_20220902144433.png"
              /><span
                style="
                  font-size: 12px;
                  float: left;
                  margin-left: 3%;
                  margin-top: 2%;
                "
                >Daisy</span
              ><span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 2%;
                "
                >330</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902144813.png"
              />
            </p>
          </div>
          <div class="tiezi2" style="text-align: center">
            <img class="img2" src="/src/assets/微信图片_20220902144152.jpg" />
            <p>
              <span style="font-size: 18px">眼综合+全脸脂肪填充前后对比</span>
            </p>
            <p>
              <img
                style="float: left; margin-top: 2%"
                src="/src/assets/微信图片_20220902144433.png"
              /><span
                style="
                  font-size: 12px;
                  float: left;
                  margin-left: 3%;
                  margin-top: 2%;
                "
                >Daisy</span
              ><span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 2%;
                "
                >330</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902144813.png"
              />
            </p>
          </div>
          <div class="tiezi1" style="text-align: center">
            <img class="img1" src="/src/assets/微信图片_20220902144155.jpg" />
            <p>
              <span style="font-size: 18px">眼综合+全脸脂肪填充前后对比</span>
            </p>
            <p>
              <img
                style="float: left; margin-top: 2%"
                src="/src/assets/微信图片_20220902144433.png"
              /><span
                style="
                  font-size: 12px;
                  float: left;
                  margin-left: 3%;
                  margin-top: 2%;
                "
                >Daisy</span
              ><span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 2%;
                "
                >330</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902144813.png"
              />
            </p>
          </div>
          <div class="tiezi1" style="text-align: center">
            <img class="img1" src="/src/assets/微信图片_20220902144157.jpg" />
            <p>
              <span style="font-size: 18px">眼综合+全脸脂肪填充前后对比</span>
            </p>
            <p>
              <img
                style="float: left; margin-top: 2%"
                src="/src/assets/微信图片_20220902144433.png"
              /><span
                style="
                  font-size: 12px;
                  float: left;
                  margin-left: 3%;
                  margin-top: 2%;
                "
                >Daisy</span
              ><span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 2%;
                "
                >330</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902144813.png"
              />
            </p>
          </div>
          <div class="tiezi1" style="text-align: center">
            <img class="img3" src="/src/assets/微信图片_20220902144200.png" />
            <p>
              <span style="font-size: 18px">眼综合+全脸脂肪填充前后对比</span>
            </p>
            <p>
              <img
                style="float: left; margin-top: 2%"
                src="/src/assets/微信图片_20220902144433.png"
              /><span
                style="
                  font-size: 12px;
                  float: left;
                  margin-left: 3%;
                  margin-top: 2%;
                "
                >Daisy</span
              ><span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 2%;
                "
                >330</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902144813.png"
              />
            </p>
          </div>
          <div class="tiezi1" style="text-align: center">
            <img class="img1" src="/src/assets/微信图片_20220902144203.jpg" />
            <p>
              <span style="font-size: 18px">眼综合+全脸脂肪填充前后对比</span>
            </p>
            <p>
              <img
                style="float: left; margin-top: 2%"
                src="/src/assets/微信图片_20220902144433.png"
              /><span
                style="
                  font-size: 12px;
                  float: left;
                  margin-left: 3%;
                  margin-top: 2%;
                "
                >Daisy</span
              ><span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 2%;
                "
                >330</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902144813.png"
              />
            </p>
          </div>
        </div>
        <div
          v-show="riji"
          style="width: 100%; background-color: #ffffff; float: left"
        >
          <div style="width: 100%; float: left" v-for="item in arr" :key="item">
            <div style="float: left; width: 100%">
              <img
                style="float: left; width: 50px; height: 50px; margin-left: 2%"
                src="/src/assets/微信图片_20220902163052.jpg"
              />
              <div style="height: 100%; float: left; margin-left: 2%">
                <span>Daisy</span>
                <p>
                  <span style="font-size: 10px; color: #d4d4d4"
                    >2020/10/09 12:09:09</span
                  >
                </p>
              </div>
              <button
                style="
                  width: 80px;
                  height: 30px;
                  border: 0px;
                  background-color: #fdf2f0;
                  color: #f3afa2;
                  float: right;
                  margin-right: 2%;
                  margin-top: 3%;
                "
              >
                已关注
              </button>
            </div>
            <div
              style="
                float: left;
                width: 100%;
                display: flex;
                justify-content: space-around;
                flex-flow: wrap;
                margin-top: 2%;
              "
            >
              <div
                style="
                  height: 110px;
                  width: 160px;
                  background-color: #fdf2f0;
                  float: left;
                  text-align: center;
                "
              >
                <img
                  style="margin-top: 20%; margin-left: -25%"
                  src="/src/assets/微信图片_20220830164027.png"
                />
                <div
                  style="
                    color: #ffffff;
                    float: left;
                    background-color: #82b3cb;
                    border-radius: 0px 20px 20px 0px;
                    width: 48px;
                    height: 24px;
                    margin-top: 54%;
                  "
                >
                  术前
                </div>
              </div>
              <div
                style="
                  height: 110px;
                  width: 160px;
                  background-color: #fdf2f0;
                  float: left;
                  text-align: center;
                "
              >
                <img
                  style="margin-top: 20%; margin-left: -25%"
                  src="/src/assets/微信图片_20220830164027.png"
                />
                <div
                  style="
                    color: #ffffff;
                    float: left;
                    background-color: #82b3cb;
                    border-radius: 0px 20px 20px 0px;
                    width: 48px;
                    height: 24px;
                    margin-top: 54%;
                  "
                >
                  术后
                </div>
              </div>
            </div>
            <div style="float: left; width: 90%; margin-left: 5%">
              <span
                >眼综合+全脸脂肪填充后10个月前后对比，做完手术也有10个月左右了，今天和大家分…</span
              >
            </div>
            <div
              style="
                float: left;
                width: 90%;
                margin-left: 5%;
                height: 50px;
                margin-top: 5%;
              "
            >
              <span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 10%;
                  margin-top: 1%;
                "
                >30</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902173750.png"
              />
              <span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 10%;
                  margin-top: 1%;
                "
                >330</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902144813.png"
              />
            </div>
          </div>
        </div>
        <div v-show="wenda" style="width: 100%; background-color: #ffffff">
          <div
            style="
              width: 100%;
              float: left;
              background-color: #ffffff;
              margin-top: 2%;
            "
            v-for="item in arr"
            :key="item"
          >
            <div
              style="float: left; width: 100%; font-size: 18px; margin-left: 4%"
            >
              请问丹凤眼适合做开眼角吗？
            </div>
            <div style="float: left; width: 100%; margin-top: 2%">
              <img
                style="float: left; width: 30px; height: 30px; margin-left: 2%"
                src="/src/assets/微信图片_20220902174356.png"
              /><span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  margin-left: 2%;
                  margin-top: 1%;
                "
                >周伟</span
              >
            </div>

            <div style="float: left; width: 90%; margin-left: 5%">
              <span
                >你好，结合五官来看看，是否适合自己。开眼角去除多余的皮肤，增大视野，改善视角，眼睛...</span
              >
            </div>
            <div
              style="
                float: left;
                width: 90%;
                margin-left: 5%;
                height: 50px;
                margin-top: 5%;
              "
            >
              <span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 10%;
                  margin-top: 1%;
                "
                >30</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902173750.png"
              />
              <span
                style="
                  color: #b5b5b5;
                  font-size: 12px;
                  float: right;
                  margin-right: 10%;
                  margin-top: 1%;
                "
                >330</span
              ><img
                style="
                  margin-right: 4%;
                  margin-top: 2%;
                  float: right;
                  vertical-align: middle;
                "
                src="/src/assets/微信图片_20220902144813.png"
              />
            </div>
          </div>
        </div>
        <div v-show="kepu">
          <div
            style="
              float: left;
              width: 100%;
              height: 180px;
              background-color: #ffffff;
              margin-bottom: 15px;
            "
            v-for="item in arr"
            :key="item"
          >
            <div
              style="
                float: left;
                width: 100%;
                border-bottom: 1px solid #f2f2f2;
                height: 140px;
              "
            >
              <div style="float: left; width: 56%; height: 100%">
                <span
                  style="
                    margin-left: 12%;
                    line-height: 60px;
                    color: #5f5f5f;
                    font-size: 16px;
                  "
                  >鼻综合塑形应该用什么材料</span
                >
                <p style="margin-top: 10%">
                  <img
                    style="vertical-align: middle; margin-left: 13%"
                    src="/src/assets/微信图片_20220830145318.png"
                  /><span
                    style="font-size: 10px; color: #9f9f9f; margin-left: 2%"
                    >2909</span
                  ><img
                    style="vertical-align: middle; margin-left: 13%"
                    src="/src/assets/微信图片_20220902173750.png"
                  /><span
                    style="font-size: 10px; color: #9f9f9f; margin-left: 2%"
                    >30</span
                  >
                </p>
              </div>
              <div style="width: 44%; float: right">
                <img
                  style="float: right; margin-right: 7%; margin-top: 10%"
                  src="/src/assets/微信图片_20220830150220.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6],
      shangping: false,
      tiezi: false,
      riji: false,
      wenda: false,
      kepu: false,
      arr: [
        { src1: "" },
        { src1: "" },
        { src1: "/src/assets/微信图片_20220902143946.jpg" },
        { src1: "/src/assets/微信图片_20220902144157.jpg" },
        { src1: "/src/assets/" },
        { src1: "/src/assets/微信图片_20220902144203.jpg" },
      ],
    };
  },
  mounted() {
    let span1 = document.querySelectorAll(".span1");
    span1[0].style.color = "#f19f90";
    span1[1].style.color = "#5f5f5f";
    span1[2].style.color = "#5f5f5f";
    span1[3].style.color = "#5f5f5f";
    span1[4].style.color = "#5f5f5f";
    this.shangping = true;
    (this.tiezi = false),
      (this.riji = false),
      (this.wenda = false),
      (this.kepu = false);
  },
  methods: {
    dianji(index) {
      console.log(index);
      if (index == 1) {
        let span1 = document.querySelectorAll(".span1");
        span1[0].style.color = "#f19f90";
        span1[1].style.color = "#5f5f5f";
        span1[2].style.color = "#5f5f5f";
        span1[3].style.color = "#5f5f5f";
        span1[4].style.color = "#5f5f5f";
        this.shangping = true;
        (this.tiezi = false),
          (this.riji = false),
          (this.wenda = false),
          (this.kepu = false);
      }

      if (index == 2) {
        let span1 = document.querySelectorAll(".span1");
        span1[0].style.color = "#5f5f5f";
        span1[1].style.color = "#f19f90";
        span1[2].style.color = "#5f5f5f";
        span1[3].style.color = "#5f5f5f";
        span1[4].style.color = "#5f5f5f";
        this.shangping = false;
        (this.tiezi = true),
          (this.riji = false),
          (this.wenda = false),
          (this.kepu = false);
      }
      if (index == 3) {
        let span1 = document.querySelectorAll(".span1");
        span1[0].style.color = "#5f5f5f";
        span1[1].style.color = "#5f5f5f";
        span1[2].style.color = "#f19f90";
        span1[3].style.color = "#5f5f5f";
        span1[4].style.color = "#5f5f5f";
        this.shangping = false;
        (this.tiezi = false),
          (this.riji = true),
          (this.wenda = false),
          (this.kepu = false);
      }
      if (index == 4) {
        let span1 = document.querySelectorAll(".span1");
        span1[0].style.color = "#5f5f5f";
        span1[1].style.color = "#5f5f5f";
        span1[2].style.color = "#5f5f5f";
        span1[3].style.color = "#f19f90";
        span1[4].style.color = "#5f5f5f";
        this.shangping = false;
        (this.tiezi = false),
          (this.riji = false),
          (this.wenda = true),
          (this.kepu = false);
      }
      if (index == 5) {
        let span1 = document.querySelectorAll(".span1");
        span1[0].style.color = "#5f5f5f";
        span1[1].style.color = "#5f5f5f";
        span1[2].style.color = "#5f5f5f";
        span1[3].style.color = "#5f5f5f";
        span1[4].style.color = "#f19f90";
        this.shangping = false;
        (this.tiezi = false),
          (this.riji = false),
          (this.wenda = false),
          (this.kepu = true);
      }
    },
  },
};
</script>

<style>
.collection {
  width: 100%;
  height: 50px;
  float: left;
  text-align: center;
  position: flex;
}
.minifoot-1-2 {
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  margin-top: 2%;
  border-radius: 5px;
}
.minifoot-1 {
  width: 100%;
  margin: auto;
}

.tiezi1 {
  width: 186px;
  background-color: #ffffff;
  margin-top: 4%;
}
.tiezi2 {
  width: 186px;
  background-color: #ffffff;
  margin-top: 4%;
  height: 267px;
}
.tiezi2 {
  width: 186px;
  background-color: #ffffff;
  margin-top: 4%;
}
.img2 {
  width: 186px;
  height: 148px;
}
.img1 {
  width: 186px;
  height: 251px;
}
.img3 {
  width: 191px;
  height: 187px;
}
</style>